<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      姓：<input type="text" v-model="firstName" /> <br /><br />
      名：<input type="text" v-model="lastName" /> <br /><br />
      全名：<span>{{fullName}}</span> <br /><br />
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
      computed: {
        //完整写法
        /* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
        
        //确定计算属性所用的功能只读不改，才可以使用简写形式
        //简写
        fullName() { //相当于get()
          console.log("get被调用了");
          return this.firstName + "-" + this.lastName;
        },
      },
    });
  </script>
</html>
